<template>
  <div>
    <slot name="tree">
      <el-row
        v-show="showTree"
        style="
          position: relative;
          width: 280px;
          margin-top: 10px;
          border: 1px solid #eee;
        "
      >
        <!-- 关闭按钮 -->
        <i
          style="position: absolute; top: 0; right: 0; z-index: 100"
          class="el-icon-delete"
          @click="close"
        >
        </i>
        <el-tree
          :data="treeDate"
          :props="{ label: 'name' }"
          @node-click="selectNode"
        >
        </el-tree>
      </el-row>
    </slot>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments.js'
import { formatTreeData } from '@/utils/index.js'
export default {
  name: 'TreeOptions',
  props: {
    showTree: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      treeDate: []
    }
  },
  created () {
    this.getTreeData()
  },
  methods: {
    selectNode (node) {
      // console.log('部门名称:', node.name)
      this.$emit('current-select', node)
      this.$emit('close1')
    },
    async getTreeData () {
      const res = await getDepartments()
      this.treeDate = formatTreeData(res.depts)
      // console.log('adddddd:', res.depts)
    },
    close () {
      this.$emit('close1')
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
